<template>
  <div class="adoption-record">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>领养记录</span>
          <el-button type="primary" @click="handleExport">导出记录</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="领养编号">
          <el-input v-model="searchForm.recordNo" placeholder="请输入领养编号" />
        </el-form-item>
        <el-form-item label="领养人">
          <el-input v-model="searchForm.adopter" placeholder="请输入领养人" />
        </el-form-item>
        <el-form-item label="领养时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 记录列表 -->
      <el-table :data="recordList" border style="width: 100%">
        <el-table-column prop="recordNo" label="领养编号" width="180" />
        <el-table-column label="宠物信息" width="300">
          <template #default="scope">
            <div class="pet-info">
              <el-image
                :src="scope.row.petImage"
                style="width: 50px; height: 50px"
                :preview-src-list="[scope.row.petImage]"
              />
              <div class="info-content">
                <div class="pet-name">{{ scope.row.petName }}</div>
                <div class="pet-type">{{ scope.row.petType }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="领养人信息" width="250">
          <template #default="scope">
            <div>{{ scope.row.adopter }}</div>
            <div>{{ scope.row.phone }}</div>
            <div class="address-text">{{ scope.row.address }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="adoptTime" label="领养时间" width="180" />
        <el-table-column prop="nextVisitTime" label="下次回访" width="180" />
        <el-table-column prop="visitStatus" label="回访状态" width="100">
          <template #default="scope">
            <el-tag :type="getVisitStatusType(scope.row.visitStatus)">
              {{ scope.row.visitStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleVisit(scope.row)"
            >
              回访记录
            </el-button>
            <el-button 
              type="info" 
              size="small" 
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 回访记录对话框 -->
    <el-dialog
      title="回访记录"
      v-model="visitDialogVisible"
      width="700px"
    >
      <div class="visit-header">
        <div class="visit-info">
          <h3>{{ currentRecord.petName }}</h3>
          <p>领养人：{{ currentRecord.adopter }}</p>
          <p>领养时间：{{ currentRecord.adoptTime }}</p>
        </div>
        <el-button type="primary" @click="handleAddVisit">添加回访</el-button>
      </div>

      <el-timeline>
        <el-timeline-item
          v-for="(visit, index) in currentRecord.visitRecords"
          :key="index"
          :timestamp="visit.visitTime"
          :type="visit.status === '良好' ? 'success' : 'warning'"
        >
          <h4>{{ visit.visitor }}</h4>
          <p>回访方式：{{ visit.method }}</p>
          <p>宠物状况：{{ visit.status }}</p>
          <p>回访记录：{{ visit.content }}</p>
          <div class="visit-images" v-if="visit.images?.length">
            <el-image
              v-for="(img, imgIndex) in visit.images"
              :key="imgIndex"
              :src="img"
              style="width: 80px; height: 80px"
              :preview-src-list="visit.images"
            />
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <!-- 添加回访对话框 -->
    <el-dialog
      title="添加回访"
      v-model="addVisitDialogVisible"
      width="500px"
    >
      <el-form :model="visitForm" :rules="visitRules" ref="visitFormRef" label-width="100px">
        <el-form-item label="回访方式" prop="method">
          <el-select v-model="visitForm.method" placeholder="请选择回访方式">
            <el-option label="上门回访" value="onsite" />
            <el-option label="电话回访" value="phone" />
            <el-option label="视频回访" value="video" />
          </el-select>
        </el-form-item>
        <el-form-item label="宠物状况" prop="status">
          <el-select v-model="visitForm.status" placeholder="请选择宠物状况">
            <el-option label="良好" value="good" />
            <el-option label="一般" value="normal" />
            <el-option label="需要关注" value="attention" />
          </el-select>
        </el-form-item>
        <el-form-item label="回访记录" prop="content">
          <el-input 
            type="textarea" 
            v-model="visitForm.content" 
            rows="3"
            placeholder="请输入回访记录"
          />
        </el-form-item>
        <el-form-item label="现场照片">
          <el-upload
            class="upload-demo"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleImageChange"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="下次回访" prop="nextVisitTime">
          <el-date-picker
            v-model="visitForm.nextVisitTime"
            type="datetime"
            placeholder="请选择下次回访时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisitDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitVisit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      title="领养详情"
      v-model="detailDialogVisible"
      width="700px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="领养编号">{{ currentRecord.recordNo }}</el-descriptions-item>
        <el-descriptions-item label="领养时间">{{ currentRecord.adoptTime }}</el-descriptions-item>
        <el-descriptions-item label="领养协议">
          <el-button type="primary" link @click="previewAgreement">查看协议</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="回访状态">
          <el-tag :type="getVisitStatusType(currentRecord.visitStatus)">
            {{ currentRecord.visitStatus }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">宠物信息</el-divider>
      <div class="pet-detail">
        <el-image
          :src="currentRecord.petImage"
          style="width: 100px; height: 100px"
          :preview-src-list="[currentRecord.petImage]"
        />
        <div class="detail-content">
          <h3>{{ currentRecord.petName }}</h3>
          <p>品种：{{ currentRecord.petType }}</p>
          <p>年龄：{{ currentRecord.petAge }}岁</p>
          <p>性别：{{ currentRecord.petGender }}</p>
        </div>
      </div>

      <el-divider content-position="left">领养人信息</el-divider>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ currentRecord.adopter }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentRecord.phone }}</el-descriptions-item>
        <el-descriptions-item label="居住地址" :span="2">{{ currentRecord.address }}</el-descriptions-item>
        <el-descriptions-item label="职业">{{ currentRecord.occupation }}</el-descriptions-item>
        <el-descriptions-item label="收入水平">{{ currentRecord.income }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  recordNo: '',
  adopter: '',
  dateRange: []
})

// 记录列表数据
const recordList = ref([
  {
    recordNo: 'LY20240318001',
    petName: 'Lucky',
    petType: '金毛',
    petImage: 'https://placeholder.com/100',
    petAge: 2,
    petGender: '公',
    adopter: '张三',
    phone: '13800138000',
    address: '北京市朝阳区xxx街道',
    occupation: '工程师',
    income: '15k-25k',
    adoptTime: '2024-03-18 10:00:00',
    nextVisitTime: '2024-04-18 10:00:00',
    visitStatus: '已回访',
    visitRecords: [
      {
        visitTime: '2024-03-25 14:00:00',
        visitor: '李明',
        method: '上门回访',
        status: '良好',
        content: '宠物适应良好，饮食正常，毛发光泽',
        images: ['https://placeholder.com/100', 'https://placeholder.com/100']
      }
    ]
  },
  {
    recordNo: 'LY20240318002',
    petName: 'Mimi',
    petType: '布偶猫',
    petImage: 'https://placeholder.com/100',
    petAge: 1,
    petGender: '母',
    adopter: '李四',
    phone: '13900139000',
    address: '北京市海淀区xxx小区',
    occupation: '教师',
    income: '10k-15k',
    adoptTime: '2024-03-18 09:00:00',
    nextVisitTime: '2024-04-18 09:00:00',
    visitStatus: '待回访',
    visitRecords: []
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 回访记录对话框
const visitDialogVisible = ref(false)
const currentRecord = reactive({})

// 添加回访对话框
const addVisitDialogVisible = ref(false)
const visitFormRef = ref(null)
const visitForm = reactive({
  method: '',
  status: '',
  content: '',
  images: [],
  nextVisitTime: ''
})

const visitRules = {
  method: [{ required: true, message: '请选择回访方式', trigger: 'change' }],
  status: [{ required: true, message: '请选择宠物状况', trigger: 'change' }],
  content: [{ required: true, message: '请输入回访记录', trigger: 'blur' }],
  nextVisitTime: [{ required: true, message: '请选择下次回访时间', trigger: 'change' }]
}

// 详情对话框
const detailDialogVisible = ref(false)

// 方法定义
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const resetSearch = () => {
  searchForm.recordNo = ''
  searchForm.adopter = ''
  searchForm.dateRange = []
}

const getVisitStatusType = (status) => {
  const types = {
    '待回访': 'warning',
    '已回访': 'success',
    '需跟进': 'danger'
  }
  return types[status] || 'info'
}

const handleVisit = (row) => {
  Object.assign(currentRecord, row)
  visitDialogVisible.value = true
}

const handleAddVisit = () => {
  visitForm.method = ''
  visitForm.status = ''
  visitForm.content = ''
  visitForm.images = []
  visitForm.nextVisitTime = ''
  addVisitDialogVisible.value = true
}

const handleDetail = (row) => {
  Object.assign(currentRecord, row)
  detailDialogVisible.value = true
}

const handleExport = () => {
  ElMessage.success('导出功能待实现')
}

const handleImageChange = (file) => {
  // 这里应该实现图片上传逻辑
  visitForm.images.push(URL.createObjectURL(file.raw))
}

const previewAgreement = () => {
  ElMessage.success('查看协议功能待实现')
}

const submitVisit = async () => {
  if (!visitFormRef.value) return
  
  await visitFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('回访记录添加成功')
      addVisitDialogVisible.value = false
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pet-info {
  display: flex;
  align-items: center;
}

.info-content {
  margin-left: 10px;
}

.pet-name {
  font-size: 14px;
  font-weight: bold;
}

.pet-type {
  font-size: 12px;
  color: #666;
}

.address-text {
  color: #666;
  font-size: 12px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.visit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.visit-info h3 {
  margin: 0 0 10px 0;
}

.visit-info p {
  margin: 5px 0;
  color: #666;
}

.visit-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pet-detail {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.detail-content h3 {
  margin: 0 0 10px 0;
}

.detail-content p {
  margin: 5px 0;
  color: #666;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 